<template>
  <div>
    <div sytle="margin: 10px 0">
      <el-input
        v-model="search"
        placeholder="请输入你需要的书籍"
        style="width: 20%;margin-bottom: 10px"
      ></el-input>
      <el-button type="primary" sytle="margin-left: 30px" @click="searchBook()"
        >查询</el-button
      >
      <el-button type="primary" @click="getBook()">刷新</el-button>
    </div>
    <el-table :data="tableData" height="730" border stripe style="width: 100%">
      <el-table-column prop="bookid" label="书籍编号" sortable>
      </el-table-column>
      <el-table-column prop="bookname" label="书名"> </el-table-column>
      <el-table-column prop="author" label="作者"> </el-table-column>
      <el-table-column prop="lendnum" label="借出量"> </el-table-column>
      <el-table-column prop="surplus" label="剩余量"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            class="el-icon-circle-plus"
            size="mini"
            type="primary"
            round
            @click="
              showBookDialog(
                '确认书籍',
                scope.row.bookid,
                scope.row.bookname,
                scope.row.author,
                scope.row.lendnum,
                scope.row.surplus
              )
            "
          >
            借书</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="dialogCategory" :visible.sync="dialogVisible">
      <el-form :model="updateData">
        <img
          :src="updateData.imgSrc"
          style="width: 200px;position: relative;"
        /><br /><br />
        <el-form-item label="书名" :label-width="formLabelWidth">
          <el-input
            v-model="updateData.bookname"
            :disabled="true"
            :readonly="dialogCategory == '确认书籍'"
          ></el-input>
        </el-form-item>
        <el-form-item label="作者" :label-width="formLabelWidth">
          <el-input
            v-model="updateData.author"
            :disabled="true"
            :readonly="dialogCategory == '确认书籍'"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatedata()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<script>
export default {
  methods: {
    showBookDialog (dialogCategory, bookid, bookname, author) {
      this.dialogVisible = true
      this.updateData.bookid = bookid
      this.updateData.imgSrc = require('@/assets/' +
        this.updateData.bookid +
        '.jpg')
      this.updateTime.bookid = bookid
      this.updateData.bookname = bookname
      this.updateTime.bookname = bookname
      this.updateData.author = author
      this.dialogCategory = dialogCategory
    },
    updatedata () {
      this.dialogVisible = false
      console.log(this.updateData.bookid)
      this.$ajax({
        method: 'get',
        url: 'book/surplus',
        params: { bookid: this.updateData.bookid }
      })
        .then(res => {
          if (res.data > 0) {
            this.$ajax({
              method: 'put',
              url: 'book/lendbook',
              params: { bookid: this.updateData.bookid }
            })
              .then(res => {
                console.log(res.data)
                if (res.data === true) {
                  this.$message({ type: 'success', message: '借书成功' })
                  this.getBook()
                  this.getCurrentTime()
                }
              })
              .catch(function (error) {
                console.log(error)
              })
          } else {
            this.$message({ type: 'fail', message: '库存不足，借书失败' })
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    getCurrentTime () {
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let hh = new Date().getHours()
      let mf =
        new Date().getMinutes() < 10
          ? '0' + new Date().getMinutes()
          : new Date().getMinutes()
      let ss =
        new Date().getSeconds() < 10
          ? '0' + new Date().getSeconds()
          : new Date().getSeconds()
      this.updateTime.lendtime =
        yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss
      // console.log(this.updateTime),
      this.$ajax({
        method: 'post',
        url: 'borrow/borrow',
        data: this.updateTime
      })
        .then(res => {
          if (res.data === true) {
            this.getBorrow()
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    getBook () {
      this.$ajax('/book/bookAll')
        .then(res => {
          this.tableData = res.data
          console.log(res.data)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    searchBook () {
      this.$ajax({
        method: 'get',
        url: 'book/book',
        params: { bookName: this.search }
      })
        .then(res => {
          this.tableData = res.data
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    getBorrow () {
      this.$ajax('/borrow/borrowAll')
        .then(res => {
          console.log(res.data)
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  },
  data () {
    return {
      dialogVisible: false,
      formLabelWidth: '50px',
      search: '',
      tableData: [],
      updateData: {
        bookid: '',
        bookname: '',
        author: '',
        imgSrc: ''
      },
      updateTime: {
        bookid: '',
        bookname: '',
        userid: parseInt(this.$route.query.userId),
        username: this.$route.query.userName,
        lendtime: ''
      }
    }
  },
  created () {
    this.getBook()
  }
}
</script>
